<template>
    <div class="reset-password-container" v-loading="loading">
        <el-form ref="form" :model="formData" :rules="rules">
            <el-form-item prop="oldPassword">
                {{ translate('label.oldPassword') }}
                <el-input
                    v-model="formData.oldPassword"
                    :placeholder="translate('label.inputOldPassword')"
                    tabindex="1"
                    type="password">
                </el-input>
            </el-form-item>
            <el-form-item prop="newPassword">
                {{ translate('label.newPassword') }}
                <el-input
                    v-model="formData.newPassword"
                    :placeholder="translate('label.inputNewPassword')"
                    tabindex="2"
                    type="password">
                </el-input>
                <el-tooltip class="item" effect="dark" :content="translate('label.validateNewPassword')" placement="top-end">
                    <i class="el-icon-info"></i>
                </el-tooltip>
            </el-form-item>
            <el-form-item prop="newPassword2">
                {{ translate('label.newPassword2') }}
                <el-input
                    v-model="formData.newPassword2"
                    :placeholder="translate('label.inputNewPassword2')"
                    tabindex="3"
                    type="password">
                </el-input>
            </el-form-item>
        </el-form>
        <div class="dialog-footer">
            <el-button size="mini" type="primary" @click="save">{{ translate('button.save') }}</el-button>
        </div>
    </div>
</template>

<script lang="ts">
import {Component} from "vue-property-decorator";
import BaseVue from '@/common/base-vue'
import {regexVerifyPwd} from '@/utils/validate'
import UserCenterService from "./user-center.service";
import ResetPasswordModel from "@/views/system/user-center/model/reset-password.model";
import {ElForm} from "element-ui/types/form";
import LocalStorageUtil from "../../../utils/local-storage-util";

@Component({components: {}})
export default class ResetPassword extends BaseVue {
    public loading = false;
    public formData: ResetPasswordModel = new ResetPasswordModel();
    //验证规则
    public rules: {
        oldPassword: Array<object>,
        newPassword: Array<object>,
        newPassword2: Array<object>,
    };

    private $refs: {
        form: ElForm;
    };
    // 定时器
    private timer: NodeJS.Timer | null = null

    //新密码校验（密码6位以上不能为纯字母或纯数字）
    private validateNewPassword(rule, value, callback) {
        if (!regexVerifyPwd(value)) {
            callback(new Error(this.translate('label.validateNewPassword')))
        } else {
            callback();
        }
    };

    //确认密码校验（两次密码不一致）
    private validateNewPassword2(rule, value, callback) {
        if (value !== this.formData.newPassword) {
            callback(new Error(this.translate('label.validateNewPassword2')));
        } else {
            callback();
        }
    };

    //生命周期created
    public created() {
        this.rules = {
            oldPassword: [{required: true, message: this.translate('label.inputOldPassword'), trigger: 'change'}],
            newPassword: [{required: true, message: this.translate('label.inputNewPassword'), trigger: 'change'},
                {validator: this.validateNewPassword, trigger: 'change'}],
            newPassword2: [{required: true, message: this.translate('label.inputNewPassword2'), trigger: 'change'},
                {validator: this.validateNewPassword2, trigger: 'blur'}],
        };
    };

    // 确定修改
    public save() {
        this.$refs.form.validate((valid: boolean) => {
            if (valid) {
                this.loading = true;
                UserCenterService.resetPassWord(this.formData).then(res => {
                    if (res.status === 200) {
                        this.$message.success(this.translate('label.resetSuccess'));
                        this.$emit('success');
                        // 重新登录 一秒弹提示信息
                        this.timer = setTimeout(() => {
                            LocalStorageUtil.deleteItem('userInfo');
                            LocalStorageUtil.deleteItem('asideActive');
                            LocalStorageUtil.deleteItem('menuList');
                            LocalStorageUtil.deleteItem('dict');
                            LocalStorageUtil.deleteItem('token');
                            window.location.reload();
                        }, 1000);
                    }
                }).finally(() => {
                    this.loading = false;
                })
            }
        });
    };

    // 清除定时器
    public beforeDestroy() {
        clearTimeout(this.timer)
    }
}
</script>

<style lang="scss" scoped>
.reset-password-container {
    padding: 0 20px;

    .el-form {
        width: 320px;
        padding-right: 20px;
        color: $base-font-color-secondary;

        .el-form-item {
            text-align: left;
            margin-bottom: 10px;

            .el-form-item__content {
                font-size: 12px;

                .el-input--small {
                    ::v-deep .el-input__inner {
                        width: 300px;
                        height: 30px;
                        border-radius: 4px;
                    }
                }
            }

        }
    }

    .dialog-footer {
        text-align: right;
        line-height: 0;
        padding-top: 10px;
    }
}
</style>
